<template>
  <div class="survey container-content">
    <div class="app-view-box">
      <el-row>
        <el-col :span="24">
          <h3 class="panel-title">银行转账单</h3>
        </el-col>
      </el-row>
      <el-divider class="divider"></el-divider>
      <el-row class="export-container">
        <el-button type="primary" size="small" @click="addNewData"
          >新增</el-button
        >
        <el-button type="primary" size="small" @click="exporting"
          >导出</el-button
        >
        <!-- <el-dropdown
          style="margin-left: 10px"
          trigger="click"
          @command="handleCommand"
        >
          <el-button size="small" type="primary">
            业务操作<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="edit">修改变更</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->
      </el-row>
      <el-row class="filter-container">
        <el-col :span="24">
          <el-input
            placeholder="查询..."
            v-model="searchValue"
            class="input-with-select"
            @change="searchData"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              type="primary"
              @click="searchData"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-table
        ref="customerTable"
        :data="tableData"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <!-- @selection-change="handleSelectionChange" -->
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column prop="billNo" label="单据编号"> </el-table-column>
        <el-table-column prop="copeMoney" label="应付金额"></el-table-column>
        <el-table-column
          prop="interestMoney"
          label="利息金额"
        ></el-table-column>
        <el-table-column prop="dueDate" label="到期日"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="详情"
              placement="bottom"
            >
              <el-button
                plain
                icon="el-icon-more"
                @click="handleDetail(scope.$index, scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="bottom"
            >
              <el-button
                type="primary"
                plain
                icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="bottom"
            >
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      class="table-pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 弹出框 -->
    <el-drawer
      v-if="drawer"
      :title="rowId ? '编辑银行转账单' : '新增银行转账单'"
      :visible.sync="drawer"
      direction="rtl"
      :before-close="handleClose"
      size="100%"
      destroy-on-close
    >
      <div class="drawer-content">
        <!-- <FormCom ref="formRef" :rowId="rowId" /> -->
      </div>
      <div class="demo-drawer__footer">
        <el-button @click="cancelForm">取 消</el-button>
        <el-button type="primary" @click="submit">保存</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { listInfo, delInfo } from "@/api/finance/transfer";
export default {
  data() {
    return {
      searchValue: "",
      tableData: [],
      currentPage: 1, //当前页
      pageSize: 10, //每页条数
      total: 0,
      rowId: "",
      drawer: false,
    };
  },
  methods: {
    addNewData() {},
    exporting() {},
    // 获取列表请求
    getData() {
      let page = this.currentPage;
      let limit = this.pageSize;
      listInfo({ page, limit }).then((res) => {
        if (res.code === 200) {
          this.tableData = res.rows;
          this.total = res.total;
        }
      });
    },
    // 删除事件
    handleDelete(index, row) {
      this.$confirm("请确定要删除所选的记录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delInfo(row.id).then((res) => {
            if (res.code === 200) {
              this.tableData.splice(index, 1);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getData();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 搜索事件
    searchData() {
      // let searchValue = this.searchValue;
      // searchSurvey({ searchValue }).then((res) => {
      //   this.tableData = res.rows;
      //   console.log("请求成功", res);
      // });
    },
    //新增按钮
    addNewData() {
      this.drawer = true;
      this.rowId = "";
    },
    //编辑按钮
    handleEdit(index, row) {
      this.rowId = row.id;
      this.drawer = true;
    },
    // 详情按钮
    handleDetail(index, row) {},
    // 取消
    cancelForm() {
      this.drawer = false;
      this.rowId = "";
      this.getData();
    },
    // 关闭 drawer
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.rowId = "";
          this.getData();
        })
        .catch((_) => {});
    },
    //业务操作
    handleCommand(type) {
      this.drawer = true;
    },
    handleSelectionChange(val) {
      this.rowId = val[0].id;
    },
    submit() {
      const cb = () => {
        this.drawer = false;
        this.getData();
      };
      this.$refs.formRef.submit(cb);
    },
    //分页器size
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    //分页器当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
  },
  created() {
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
.divider {
  margin: 0;
}
.export-container {
  margin: 15px 0;
}
.pagination {
  margin-top: 10px;
}
</style>
